<fieldset style="min-width:500px;overflow-x:scroll;" id="preorderBox">
     <label>服务时间</label>
     <table class="tablesorter clear">
        <thead id="preorderBaseHead"></thead>
        <!--时间配置标题模板-->
        <script id="preorderHeadTemplate" type='text/html'>
            <tr>
                <%for(var item in templateData){%>
                <th><%=templateData[item]['name']%></th>
                <%}%>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>价格</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
        </script>
        <tbody id="preorderBaseBody"></tbody>
        <!--时间配置内容模板-->
        <script id="preorderRowTemplate" type="text/html">
            <%var i=0;%>
            <%for(var item in templateData){%>
            <%item = templateData[item]%>

            <%if(item['product_key'] || item['product_key'] == 0){%>
                <%i = item['product_key']%>
            <%}%>

            <tr class="preorderTr<%=i%>">
                <%var specArrayList = typeof item['spec_array'] == 'string' && item['spec_array'] ? JSON().parse(item['spec_array']) : item['spec_array'];%>
                <%for(var result in specArrayList){%>
                <%result = specArrayList[result]%>
                <td>
                    <%if(result['type'] == 1){%>
                    <%=result['value']%>
                    <%}else{%>
                    <img class="img-thumbnail" width="30px" height="30px" src="<%=webroot(result['value'])%>">
                    <%}%>
                </td>
                <%}%>
                <td>
                    <input type="hidden"  name="preorder[goods_no][<%=i%>][]" value="<%=item['goods_no']%>">
                    <div class="input-group col-md-6">
                        <input class="form-control" pattern='date' type="text" name="preorder[start_time][<%=i%>][]" id="preorder[start_time][<%=i%>][]" onfocus="WdatePicker({minDate:minDataSetting(this,'start')})" value="<%=item['start_time']%>" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </td>
                <td>
                    <div class="input-group col-md-6">
                        <input class="form-control" pattern='date' type="text" name="preorder[end_time][<%=i%>][]"  onfocus="WdatePicker({minDate:minDataSetting(this,'end')})" value="<%=item['end_time']%>" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </td>
                <td>
                    <input type='hidden' name="preorder[groupPrice][<%=i%>][]" value="<%=item['groupPrice']%>" />
                    <input class="form-control input-sm" name="preorder[price][<%=i%>][]" type="text" pattern="float" value="<%=item['price']%>" style="width:70px;display:inline;" />
                    <button class="btn btn-sm <%if(item['groupPrice']){%>btn-success<%}else{%>btn-default<%}%>" type="button" onclick="memberPreorderPrice(this,{$seller_id},'<%=i%>');"><i class="fa fa-user"></i> 会员价格</button>
                </td>
                <td><input class="form-control input-sm" name="preorder[store_nums][<%=i%>][]" type="text" pattern="int" value="<%=item['store_nums']?item['store_nums']:100%>" style="width:70px" /></td>
                <td>
                    <a onclick="addPreorder(this);"><i class='operator fa fa-plus'></i></a>
                    <a onclick="delPreorder(this,'<%=i%>');"><i class='operator fa fa-close'></i></a>
                </td>
            </tr>
            <%i++;%>
            <%}%>
        </script>
    </table>
</fieldset>

<script language="javascript">
    initPreorderTable();

    $(document).ready(function()
    {
        //监控规格数据
        $("body").on('change','input[name^="_goods_no"]',function()
        {
            var index = $(this).attr('name').substr(-2,1);
            $('input[name="preorder[goods_no]['+index+'][]"]').val($(this).val());
        });

        $("body").on('change','input[name^="_store_nums"]',function()
        {
            var index = $(this).attr('name').substr(-2,1);
            $('input[name="preorder[store_nums]['+index+'][]"]').val($(this).val());
        });

        $("body").on('change','input[name^="_sell_price"]',function()
        {
            var index = $(this).attr('name').substr(-2,1);
            $('input[name="preorder[price]['+index+'][]"]').val($(this).val());
        });

        $("body").on('change',':hidden[name^="_groupPrice"]',function()
        {
            var index = $(this).attr('name').substr(-2,1);
            $(':hidden[name="preorder[groupPrice]['+index+'][]"]').val($(this).val());
        });

        //进行数据填充
        {if:isset($product) && isset($form['preorder'])}
        var product    = {echo:JSON::encode($product)};
        var preorder   = {echo:JSON::encode($form['preorder'])};
        var spec_aray = new Array();
        var product_key = new Array();
        for(i=0;i<= product.length -1;i++)
        {
            spec_aray[product[i]['products_no']] = product[i]['spec_array'];
            product_key[product[i]['products_no']] = i;
        }
        for(i=0;i<= preorder.length -1;i++)
        {
            preorder[i]['spec_array']  = spec_aray[preorder[i]['goods_no']];
            preorder[i]['product_key'] = product_key[preorder[i]['goods_no']];
        }

        var preorderHeadHtml = template.render('preorderHeadTemplate',{'templateData':{echo:$product[0]['spec_array']}});
        $('#preorderBaseHead').html(preorderHeadHtml);

        var preorderRowHtml = template.render('preorderRowTemplate',{'templateData':preorder});
        $('#preorderBaseBody').html(preorderRowHtml);

        {/if}

    });

    //时间关联设置
    function minDataSetting(self,type)
    {
        var i = $(self).attr('name').substr(-4,1); //不同规格的索引
        var index = $("input[name='"+$(self).attr('name')+"']").index($(self)); //同规格列表的索引
        var lastTime = '';
        //第一个开始时间
        if (index == 0 && type == 'start')
        {
            {if:isset($form)}
                return '';
            {else:}
                return '%y-%M-%d';
            {/if}
        }
        //结束时间
        if (type == 'end')
        {
            lastTime = $(self).parent().parent().prev().find('div').find('input[name="preorder[start_time]['+i+'][]"]').val();
            return lastTime;
        }
        //非第一个开始时间
        if (index > 0 && type == 'start')
        {
            lastTime = $(self).parent().parent().parent().prev().find('td').find('input[name="preorder[end_time]['+i+'][]"]').val();
            if (lastTime == "")
            {
                $(self).parent().parent().parent().prev().find('td').find('input[name="preorder[end_time]['+i+'][]"]').focus();
                return;
            }
            lastTime = lastTime.replace(/-/g, '/');
            var date = new Date(lastTime);
            date.setDate(date.getDate() + 1);
            var year = date.getFullYear();
            var month =(date.getMonth() + 1).toString();
            var day = (date.getDate()).toString();
            if (month.length == 1)
            {
                month = "0" + month;
            }
            if (day.length == 1)
            {
                day = "0" + day;
            }
            var dateTime = year + "-" + month + "-" + day;
            return dateTime;
        }
    }

    //删除时间类商品规格
    function delPreorder(_self,i)
    {
        if ($('[name="preorder[goods_no]['+i+'][]"]').length == 1){
            alert('该规格数据必须保留一个');
            return
        }
        $(_self).parent().parent().remove();
        if($('#preorderBaseBody tr').length == 0)
        {
            initPreorderTable();
        }
    }

    //添加时间类商品规格
    function addPreorder(_self)
    {
        var html = $(_self).parent().parent().prop("outerHTML");
        $(html).insertAfter($(_self).parent().parent());
    }

    //初始时间类商品规格
    function initPreorderTable()
    {
        //默认产生一条时间类商品标题空挡
        var preorderHeadHtml = template.render('preorderHeadTemplate',{'templateData':[]});
        $('#preorderBaseHead').html(preorderHeadHtml);

        //默认产生一条时间类商品规格空挡
        var preorderRowHtml = template.render('preorderRowTemplate',{'templateData':[[]]});
        $('#preorderBaseBody').html(preorderRowHtml);
    }

    /**
     * 时间类商品会员价格
     * @param obj 按钮所处对象
     */
    function memberPreorderPrice(obj,seller_id,i)
    {
        var sellerId  = seller_id ? seller_id : 0;
        var sellPrice = $(obj).siblings('input[name^="preorder[price]['+i+']"]')[0].value;
        if($.isNumeric(sellPrice) == false)
        {
            alert('请先设置商品的价格再设置会员价格');
            return;
        }

        var groupPriceValue = $(obj).siblings('input[name^="preorder[groupPrice]['+i+']"]');

        //用户组的价格
        art.dialog.data('groupPrice',groupPriceValue.val());

        //开启新页面
        var tempUrl = creatUrl("goods/member_price/sell_price/@sell_price@/seller_id/@seller_id@");
        tempUrl = tempUrl.replace('@sell_price@',sellPrice).replace('@seller_id@',sellerId);
        art.dialog.open(tempUrl,{
            id:'memberPriceWindow',
            title: '会员价格',
            ok:function(iframeWin, topWin)
            {
                var formObject = iframeWin.document.forms['groupPriceForm'];
                var groupPriceObject = {};
                $(formObject).find('input[name^="groupPrice"]').each(function(){
                    if(this.value != '')
                    {
                        //去掉前缀获取group的ID
                        var groupId = this.name.replace('groupPrice','');

                        //拼接json串
                        groupPriceObject[groupId] = this.value;
                    }
                });

                //更新会员价格值
                var temp = [];
                for(var gid in groupPriceObject)
                {
                    temp.push('"'+gid+'":"'+groupPriceObject[gid]+'"');
                }
                groupPriceValue.val('{'+temp.join(',')+'}');
                return true;
            }
        });
    }

</script>